<template>
	<div ref="chartRef" :style="{ height, width }"></div>
</template>

<script setup lang="ts">
import { PropType } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import type { Ref } from 'vue';
import { homeAlarmConfirmationType } from '/@/api/analysis/index';
defineProps({
	width: {
		type: String as PropType<string>,
		default: '100%',
	},
	height: {
		type: String as PropType<string>,
		default: '100%',
	},
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const getHomeAlarmConfirmationType = () => {
	homeAlarmConfirmationType().then((res) => {
		// let legend = [],
		// 	data = [],
		// 	xAxis = [];
		// for (const k in res.data) {
		// 	xAxis.push(k);
		// 	const k_value = res.data[k];
		// 	let data_arr = [];
		// 	let legend_arr = [];
		// 	for (const j in k_value) {
		// 		data_arr.push({
		// 			name: j,
		// 			value: k_value[j],
		// 		});
		// 		legend_arr.push(j);
		// 	}
		// 	data.push(data_arr);
		// 	legend.push(legend_arr);
		// }
		let seriesData: any = [];
		for (let i = 0; i < res.data?.type?.length; i++) {
			const k = res.data.type[i];
			const data = res.data.y[k];
			seriesData.push({
				name: k,
				data: data,
				type: 'bar',
				stack: 'total',
				barMaxWidth: 60,
			});
		}
		setOptions({
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					lineStyle: {
						width: 1,
						color: '#019680',
					},
				},
			},
			grid: { left: '2%', right: '2%', top: '2%', bottom: 10, containLabel: true },
			// grid: { left: 20, top: 30, bottom: 10, right: 20, containLabel: true },
			xAxis: {
				type: 'category',
				data: res.data.x,
			},
			yAxis: {
				type: 'value',
				minInterval: 1,
			},
			series: seriesData,
		});
	});
};
onMounted(() => {
	getHomeAlarmConfirmationType();
});
</script>

<style lang="scss" scoped></style>
